<template>
  <el-tag
    :type="type"
    :effect="effect"
  >
    {{ label }}
  </el-tag>
</template>

<script setup lang="ts">
  import { computed } from 'vue';

  const props = withDefaults(
    defineProps<{
      /** 状态值 */
      status: number | string;
      /** 状态配置 */
      options?: { label: string; value: number | string; type?: string }[];
      /** 标签效果 */
      effect?: 'dark' | 'light' | 'plain';
    }>(),
    {
      status: '',
      options: () => [],
      effect: 'light'
    }
  );

  // 标签类型
  const type = computed(() => {
    const option = props.options.find((item) => item.value === props.status);
    return (option?.type || 'info') as 'success' | 'warning' | 'info' | 'danger' | 'primary';
  });

  // 标签文本
  const label = computed(() => {
    const option = props.options.find((item) => item.value === props.status);
    return option?.label || props.status;
  });
</script>
